<template>
  <van-popup :show="show" @update:show="$emit('update:show', $event)" position="center" round :close-on-click-overlay="false">
    <div class="login-modal">
      <div class="login-header">
        <h3>用户登录</h3>
        <p>请输入手机号登录</p>
      </div>
      
      <!-- 手机号登录 -->
      <div class="login-content">
        <PhoneLogin 
          @success="handlePhoneLoginSuccess"
          @error="handlePhoneLoginError"
        />
      </div>
      
      <!-- 取消按钮 -->
      <div class="cancel-action">
        <van-button 
          plain 
          size="large" 
          @click="handleCancel"
        >
          取消
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import PhoneLogin from './PhoneLogin.vue'

interface Props {
  show: boolean
}

interface Emits {
  (e: 'update:show', value: boolean): void
  (e: 'success'): void
  (e: 'cancel'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 手机号登录成功
const handlePhoneLoginSuccess = () => {
  emit('success')
  emit('update:show', false)
}

// 手机号登录错误
const handlePhoneLoginError = (message: string) => {
  console.error('手机号登录错误:', message)
}

// 取消登录
const handleCancel = () => {
  emit('cancel')
  emit('update:show', false)
}
</script>

<style scoped>
.login-modal {
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
}

.login-header {
  padding: 20px 20px 0;
  text-align: center;
}

.login-header h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: bold;
}

.login-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.login-content {
  padding: 20px 0;
}

.cancel-action {
  padding: 0 20px 20px;
  display: flex;
  justify-content: center;
}
</style> 